BeforeInput is fired with a wrong text at a wrong time on IE #7107
+214
−4
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This patch addresses a typing issue with Japanese IME on Internet Explorer.
The issue is related to the known issue about Korean IME documented in draft.js,
but different. Korean issue is not addressed by this patch.
This patch also adds a new testcase to cover BeforeInputEventPlugin.
Repro steps:
Issue description:
The 1st candaidate is always committed even when we try to commit the 2nd
or later candidate. Since facebook.com is using draft.js, this issue can
be reproed on the NewsFeed Post box of facebook.com.
Root cause/Fix:
React creates a browser-independent
beforeInput
event to match W3C specfrom the combination of the existing events (e.g. compositionstart, keyup,
textnput, and etc.). The problem is that in IE, onBeforeInput is fired with
a wrong text at a wrong time.
Basically React uses
textInput
events to create beforeInput. However, IEfires an event named
textinput
(all lowercases), that is not useful due toa couple of IE's incorrect behaviors as below.
composition, a
textinput
is fired, but it contains only the last compositiontext.
textinput
event does not contain an ideographiccharacter (U+3000) when a user hits a space key not in composition state.
As a fallback, React stores a text of a target element at compositionend or
additional keyboard/mouse events, and fires
beforeinput
at compositionendwith the stored text. One of the additional events is keyUp with keyCode=32.
With Korean and Chinese IME, a space key is one of keys to end composition.
With Japanese IME, however, a space key does not mean the end of composition
but just switching candidates. As a result, the first candidate is stored as
a fallback text, and it is displayed even if a user selects the 2nd or
a subsequent candidate.
The fix is that we don't use additional keyboard/mouse events if composition
event is available. IE9-11 fires composition events even though its event data
is not correct. It's good enough to use as a time to store a fallback text.